<template>
    <div id="dingd">
        <div class="ding">
            <span v-for="(item,index) in arr" :key="index">{{item}}</span>
        </div>
        <div class="di">
            <div class="block" v-for="(item,index) in newarr" :key="index">
              <img :src="item.pic" alt="">
              <span class="name">{{item.name}}</span>
              <span class="price">{{item.price}}</span>
            </div>
        </div>
    </div>
</template>

<script>
var pic1 = "https://img1.baidu.com/it/u=1582044829,1676920394&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665853200&t=0c652e074f50aeb65c113d8f978f4e04"
  var pic2 = "https://img1.baidu.com/it/u=2023886721,221813672&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665853200&t=cb79440bb308cf5c838654b05af71849"

  var pic3 = "https://img1.baidu.com/it/u=3515082661,293311857&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665853200&t=d4e44307f31ce78ec68f256b38d07e43"
export default {
    data(){
        return{
            arr:["全部","待消费","待评价","退款"],
            newarr:[
                {pic:pic1,name:"纯手工饺子",price:43},
                {pic:pic2,name:"唐久便利店",price:43},
                {pic:pic3,name:"美益水果",price:43}
            ]

            
        }
    }
}
</script>

<style>
    *{
        margin:0;
        padding: 0;
    }

    .ding{
        width: 100%;
        height: 30px;
        background-color: #f5f5f5;
        display: flex;
        justify-content: center;
    }
    .ding span{
        padding: 10px;
        display: inline-block;
    }
</style>